<template>
    <div id="box">
        <div id="container">
            <div id="layer" v-show="isShow"><img src="static/icons/loading.gif" alt=""></div>
            <!--导航条-->
            <div id="nav">
                <img src="static/icons/c.png" class="img-size" id="top" @click="back"> 
                <router-link to="/search">
                    <div @click="searchClick"><img src="static/icons/search.png" class="img-size" id="bottom"></div>
                </router-link>
                
            </div>
            <!--轮播图-->
            <div id="loop">
                <Swiper auto loop :list="list"></Swiper>
            </div>
            <!--九宫格-->
            <div id="nineItem" >
                <div v-for="i in items" class="items-box">
                    <img :src="'img/'+i.img">
                    <p>{{i.title}}</p>
                </div>
                <div class="items-box"></div>
                <div class="items-box"></div>
            </div>
            <!--三小块-->
            <div id="pics">
                <router-link to="/recommend/abc">
                    <img src="static/img/icon1.png">
                </router-link>
                <router-link to="/newLine/abc">
                <img src="static/img/icon2.png">
                 </router-link>
                <router-link to="/specialTrip/abc">
                <img src="static/img/icon3.png">
                 </router-link>
            </div>
            <!--首页下拉信息-->
            <TripMsg></TripMsg>
            
        </div>
      
        <InfoPage></InfoPage>
   
       
        
    </div>
</template>

<script>

import InfoPage from "../components/InfoPage.vue";
import TripMsg from "../components/TripMsg.vue";

import {Divider,Swiper} from "vux";
import {mapState} from "vuex";
export default {
    data:function(){
       return{
         isShow:false
       }
    },
    methods:{
        back(){
            var con =document.getElementById("container");
            this.isback=!this.isback;
            if(this.isback){
                con.style="transform: translate(69vw,0)"
            }else{
                con.style="transform: translate(0,0)"
            }
        },
        searchClick(){
             this.$store.dispatch("requestCountry");
        }
    },
    components:{
        InfoPage,
        Divider,
        Swiper,
        TripMsg
    },
    computed:{
        ...mapState([
            "list",
            "items"
        ])
    },
    mounted:function(){
       this.$store.dispatch("requestLoop");
       this.$store.dispatch("requestItems");

       var nav = document.getElementById("nav");
       var container = document.getElementById("container");

       container.onscroll=(e)=>{
        if(e.target.scrollTop>180){
            nav.style.backgroundColor="rgba(246,236,174,0.8)"
        }else{
            nav.style.backgroundColor="rgba(255  ,255 , 255, 0.9)"
        }
        if(e.target.scrollTop>=e.target.scrollTopMax){
            this.isShow=true;
            setTimeout(function() {
                this.$store.dispatch("requestMoreTrip")
                .then(data=>{
                    this.isShow=false;
                })
            }.bind(this), 1000);
        }
       }
    }                                                   
}
</script>

<style lang='css' scoped>
    #box{
        position: relative;
        overflow: hidden;
    }
    #container{
            background-color: #FFF;
            /*border:1px solid black;*/
            width: 100vw;
            height: 100vh;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 10;
            transition: all 0.7s;
            overflow: scroll;
            overflow-x: hidden;
    }
    .img-size{
        width: 26px;
        height: 26px;
    }
    #nav{
        height: 53px;
        width: 100vw;
        display: flex;
        justify-content: space-between;
        background-image: url(../../static/img/tb.png);
        background-size:100% ; 
        background-position: 100% 5%;
        background-repeat: no-repeat;
        position: fixed;
        z-index: 100;
        background-color: rgba(255  ,255 , 255, 0.9)
    }
    #loop{
        margin-top: 40px;
         /*border: 1px  solid red;*/
    }
    #top{
         margin-left: 10px;
         margin-top: 15px;
    }
    #bottom{
         margin-right: 10px;
         margin-top: 15px;
    }
    #nineItem{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      /*border: 1px  solid black;*/
      justify-content: space-around;
      background-color: #fff;
    }
    .items-box img{
        width: 56px;
        /*border: 1px  solid red;*/
    }
    .items-box{
        /*border: 1px  solid red;*/
        margin: 10px;
        text-align: center;
        font-size: 13px;
        color: #303335;
        width: 56px;
    }
    .items-box p{
        margin: 0;
    }
  
    #pics{
        display: flex; 
        background-color: #f4f4f4;
        width: 100vw;
        height: 90px;
        padding: 0 6px;
    }
    #pics img{
        width: 32vw;
    }
    #layer{
        position: fixed;
        left: 50vw;
        bottom: 20px;
    }

</style>